<template>
  <div class="ct-collapse-item" :class="{ 'is-disabled': disabled }">
    <!-- 标题部分 -->
    <div
      class="ct-collapse-item_header"
      :class="{ 'is-disabled': disabled, 'is-active': isActive }"
      :id="`item-header-${name}`"
      @click="itemClickHander(name)"
    >
      <slot name="title">{{ title }}</slot>
      <ct-icon icon="chevron-right" class="header-angle"></ct-icon>
    </div>
    <!-- 内容部分 -->
    <transition name="slide" v-on="transitionEvent">
      <div class="ct-collapse-item_wrapper" v-show="isActive">
        <div class="ct-collapse-item_content" :id="`item-content-${name}`">
          <slot></slot>
        </div>
      </div>
    </transition>
  </div>
</template>
<script setup>
import { computed, inject } from 'vue'
import propsOptions from './props'
import { collapsecontextKey } from '@/components/CTCollapse/props'
defineOptions({
  name: 'CTCollapseItem',
})
const props = defineProps(propsOptions)

const collapseContext = inject(collapsecontextKey)

const isActive = computed(() => collapseContext.activeName.value.includes(props.name))

const itemClickHander = (currentItemName) => {
  if (!props.disabled) {
    collapseContext.handlerItemClick(currentItemName)
  }
}

const transitionEvent = {
  beforeEnter(el) {
    el.style.height = '0px'
    el.style.overflow = 'hidden'
  },
  enter(el) {
    el.style.height = `${el.scrollHeight}px`
  },
  afterEnter(el) {
    el.style.height = ''
    el.style.overflow = ''
  },
  beforeLeave(el) {
    el.style.height = `${el.scrollHeight}px`
    el.style.overflow = 'hidden'
  },
  leave(el) {
    el.style.height = '0px'
  },
  afterLeave(el) {
    el.style.height = ''
    el.style.overflow = ''
  },
}
</script>
<style lang="scss" scoped></style>
